import styles from './index.less';
import React, { useCallback, useEffect, useState } from 'react';
import {
  Form,
  Row,
  Col,
  Input,
  Button,
  Table,
  Pagination,
  Popconfirm,
  Radio,
  Divider,
  message,
  Breadcrumb
} from 'antd';
import { useDispatch, useSelector, viewModelState } from 'umi';
import { YYYY_MM_DD } from '@/utils';
function viewPage() {
  const { viewList, viewLength } = useSelector(
    (state: { view: viewModelState }) => state.view,
  );
  const [flag, setflag] = useState(false);
  let arr: React.Key[] = [];
  const [keyList, setkeyList] = useState(arr);
  const [page, setPage] = useState(1);

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'view/getviewList',
    });
  }, []);
  const [form] = Form.useForm();
  const getFields = () => {
    const children = [];
    children.push(
      <Col span={6}>
        <Form.Item name={`IP`} label={`IP`}>
          {<Input placeholder="请输入IP地址" />}
        </Form.Item>
      </Col>,
      <Col span={6}>
        <Form.Item name={`userAgent`} label={`UA`}>
          {<Input placeholder="请输入User Agent" />}
        </Form.Item>
      </Col>,
      <Col span={6}>
        <Form.Item name={`url`} label={`URL`}>
          {<Input placeholder="请输入URL" />}
        </Form.Item>
      </Col>,
      <Col span={6}>
        <Form.Item name={`address`} label={`地址`}>
          {<Input placeholder="请输入地址" />}
        </Form.Item>
      </Col>,
      <Col span={6}>
        <Form.Item name={`browser`} label={`浏览器`}>
          {<Input placeholder="请输入浏览器" />}
        </Form.Item>
      </Col>,
      <Col span={6}>
        <Form.Item name={`engine`} label={`内核`}>
          {<Input placeholder="请输入内核" />}
        </Form.Item>
      </Col>,
      <Col span={6}>
        <Form.Item name={`os`} label={`OS`}>
          {<Input placeholder="请输入操作系统" />}
        </Form.Item>
      </Col>,
      <Col span={6}>
        <Form.Item name={`device`} label={`设备`}>
          {<Input placeholder="请输入设备" />}
        </Form.Item>
      </Col>,
    );

    return children;
  };

  const onFinish = (values: any) => {
    dispatch({
      type: 'view/searview',
      payload: values,
    });
  };
  const changePage = (page: number) => {
    setPage(page);
    dispatch({
      type: 'view/getviewList',
      payload: page,
    });
  };

  let delApi = (key: string | number) => {
    dispatch({
      type: 'view/delview',
      payload: {
        key,
        page,
      },
    });
  };
  const delAction = useCallback(() => {
    return () =>
      Promise.all(keyList.map((item) => delApi(item))).then((res) => {
        message.success('删除成功');
        setflag(false);
      });
  }, [delApi]);

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
      if (selectedRows.length === 0) {
        setflag(false);
      } else if (selectedRows.length) {
        setkeyList(selectedRowKeys);
        setflag(true);
      }
    },
  };
  const columns: any = [
    {
      title: 'URL',
      width: 200,
      dataIndex: 'url',
      key: 'name',
      fixed: 'left',
    },
    {
      title: 'IP',
      width: 100,
      dataIndex: 'IP',
      key: 'IP',
      fixed: 'left',
    },
    {
      title: '浏览器',
      dataIndex: 'browser',
      key: '1',
      width: 150,
    },
    {
      title: '内核',
      dataIndex: 'engine',
      key: '2',
      width: 150,
    },
    {
      title: '操作系统',
      dataIndex: 'os',
      key: '3',
      width: 150,
    },
    {
      title: '设备',
      dataIndex: 'device',
      key: '4',
      width: 150,
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: '5',
      width: 150,
    },
    {
      title: '访问量',
      dataIndex: 'count',
      width: 150,
      key: '6',
    },
    {
      title: '访问时间',
      dataIndex: 'createAt',
      key: '7',
      width: 200,
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: (operation: any) => (
        <Popconfirm
          title="确认删除吗？"
          okText="确定"
          cancelText="取消"
          onConfirm={function () {
            dispatch({
              type: 'view/delview',
              payload: { key: operation.key, page },
            });
          }}
        >
          <a>删除</a>
        </Popconfirm>
      ),
    },
  ];
  const [selectionType] = useState<'checkbox' | 'radio'>('checkbox');
  let data: any =
    viewList && viewList.length
      ? viewList.map((item) => {
          return {
            key: item.id,
            url: <a href="#">{item.url}</a>,
            IP: item.ip,
            browser: item.browser,
            engine: item.engine,
            os: item.os,
            device: item.device,
            address: item.address,
            count: (
              <span
                style={{
                  width: '18px',
                  height: '17px',
                  lineHeight: '17px',
                  textAlign: 'center',
                  background: '#52C41A',
                  color: '#fff',
                  display: 'block',
                  borderRadius: '50%',
                }}
              >
                {item.count}
              </span>
            ),
            createAt: YYYY_MM_DD(item.createAt),
          };
        })
      : null;

  return (
    <div className={styles.viewMain}>
      <div className={styles.top}>
        <Breadcrumb>
          <Breadcrumb.Item>
            <a href="/">工作台</a>
          </Breadcrumb.Item>
          <Breadcrumb.Item>访问统计</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <main>
        <div className={styles.viewContent}>
          <div className={styles.viewContents}>
            {/* 表单 */}
            <Form
              form={form}
              name="advanced_search"
              className={styles.from}
              onFinish={onFinish}
            >
              <Row gutter={4}>{getFields()}</Row>
              <Row>
                <Col span={24} style={{ textAlign: 'right' }}>
                  <Button type="primary" htmlType="submit">
                    搜索
                  </Button>
                  <Button
                    style={{ margin: '0 8px' }}
                    onClick={() => {
                      form.resetFields();
                    }}
                  >
                    重置
                  </Button>
                </Col>
              </Row>
            </Form>
            <div className={styles.searchlists}>
              <div className={styles.top}>
                <div>
                  <Popconfirm
                    title="确认删除吗？"
                    okText="确定"
                    cancelText="取消"
                    onConfirm={delAction()}
                  >
                    <Button
                      danger
                      className={flag ? styles.block : styles.none}
                    >
                      删除
                    </Button>
                  </Popconfirm>
                </div>
                <div>
                  <span
                    role="img"
                    aria-label="reload"
                    style={{ cursor: 'pointer' }}
                    onClick={() => {
                      dispatch({
                        type: 'view/getviewList',
                      });
                    }}
                  >
                    <svg
                      viewBox="64 64 896 896"
                      focusable="false"
                      data-icon="reload"
                      width="1em"
                      height="1em"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"></path>
                    </svg>
                  </span>
                </div>
              </div>
              {/* 表格 */}
              <Table
                columns={columns}
                rowSelection={{
                  type: selectionType,
                  ...rowSelection,
                }}
                dataSource={data}
                pagination={false}
                scroll={{ x: 1000 }}
              />
              <Divider />
              {/* 分页 */}
              <div className={styles.Pagination}>
                <div></div>
                <Pagination
                  defaultCurrent={1}
                  defaultPageSize={12}
                  total={viewLength}
                  onChange={changePage}
                  showTotal={() => `共${viewLength}条数据`}
                />
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

export default viewPage;
